<template>
  <div class="shop">
    会员身份:
    <el-select size="small" style="width:100px;" v-model="form.role" filterable placeholder="全部">
      <el-option
        v-for="item in memberidentityList"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      ></el-option>
    </el-select>

    <div class="input_info">
      <el-input class="member_input" size="small" v-model="form.uid" placeholder="输入ID查询"></el-input>
      <el-button class="input_btn" size="small" type="primary" @click="searchShopMember">搜索</el-button>
    </div>

    <div class="input_info_second">
      <el-input class="member_input" size="small" v-model="form.phone" placeholder="输入手机号查询"></el-input>
      <el-button class="input_btn" size="small" type="primary" @click="searchShopMember">搜索</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width:100%;margin-top:20px;"
      max-height="650"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="uid" label="会员ID"></el-table-column>
      <el-table-column prop="nickName" label="会员昵称"></el-table-column>
      <el-table-column prop="mobile" label="会员账号"></el-table-column>
      <el-table-column prop="roleName" label="会员身份">
        <!-- <template slot-scope="scope">
          <p v-if="scope.row.role == 0">普通会员</p>
          <p v-if="scope.row.role == 1">平台管理员用户</p>
          <p v-if="scope.row.role == 2">合伙人用户</p>
          <p v-if="scope.row.role == 3">合伙人用户</p>
          <p v-if="scope.row.role == 4">合伙人用户</p>
          <p v-if="scope.row.role == 5">合伙人用户</p>
          <p v-if="scope.row.role == 6">合伙人用户</p>
          <p v-if="scope.row.role == 5">服务商</p>

          0普通会员 1平台管理员用户2合伙人用户3合伙人员工用户4小店用户5小店员工用户6服务经理
        </template> -->
      </el-table-column>
      <el-table-column prop="vip_count" label="会员绑定商户数" width="150"></el-table-column>
      <el-table-column label="会员订单数">
        <template slot-scope="scope">
          {{scope.row.orderNum}}&nbsp;&nbsp;
          <strong
            @click="watchMember(scope.row.uid)"
            class="lookbig"
          >(查看)</strong>
        </template>
      </el-table-column>
      <el-table-column label="红包余额">
        <template slot-scope="scope">
          {{scope.row.balance}}&nbsp;&nbsp;
          <strong
            @click="watchPurseAlready(scope.row.uid)"
            class="lookbig"
          >(充值记录)</strong>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="danager" @click="openDetailMember(scope.row.uid)">会员详情</el-button>
          <!-- <el-button size="mini" type="primary" @click="deleteMember(scope.row.id)">移除</el-button> -->
          <el-button size="mini" type="primary" @click="RefundMemberFee(scope.row.uid)">强制退费</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.pageNum"
          :page-size="form.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
    <jdialog title="会员信息详情" :visible.sync="isShowMemberDetail" width="800px">
      <member-detail
        :visible="isShowMemberDetail"
        :currentId="currentId"
        @close="isShowMemberDetail = false"
        @showMemberdetail="certainshowMemberdetail"
      ></member-detail>
    </jdialog>
    <jdialog title="会员订单详情" :visible.sync="isShowMemberOrderDetail" width="800px">
      <member-orderdetail
        :visible="isShowMemberOrderDetail"
        :currentId="curretOrderId"
        @close="isShowMemberOrderDetail = false"
        @showMemberOrderdetail="certainshowMemberOrderdetail"
      ></member-orderdetail>
    </jdialog>

    <jdialog title="红包记录" :visible.sync="isPurseRechargeRecord"  width='700px'>

       <div class="record">
          <div class="recharge" @click="handleClick(2)">
            <div class='re_row'></div>
            <span>红包充值记录({{recordTotal}})</span>
            <div class="re_pos" v-show="activeName == 'first'"></div>
          </div>
          <div class="recharge" @click="handleClick(3)">
            <div class='re_row'></div>
            <span >红包使用记录({{useTotal}})</span>
            <div class="re_pos" v-show="activeName == 'second'"></div>
          </div>

               <el-table :data="recordData"
      style="width:100%;margin-top:40px;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
      v-show="activeName == 'first'">
        <el-table-column label="时间" prop="createdAt"></el-table-column>
        <el-table-column label="充值类型">
           <template slot-scope="scope">
             <!-- <p v-if="scope.row.source_from ==20">加入会员送红包</p>
             <p v-if="scope.row.source_from ==25">优惠买单送红包</p>
             <p v-if="scope.row.source_from ==30">充值红包</p>
             <p v-if="scope.row.source_from ==35">发放红包过期退回</p>
             <p v-if="scope.row.source_from ==40">未核销红包退回</p>
             <p v-if="scope.row.source_from ==50">买单送红包</p>
             <p v-if="scope.row.source_from ==55">后台充值</p> -->
             <p>{{scope.row.type?'充值':'充值'}}</p>
           </template>
        </el-table-column>
        <el-table-column label="红包余额">
          <template slot-scope="scope">
            <p v-if="scope.row.money">¥{{scope.row.money}}</p>
            <p v-else>---</p>
          </template>
        </el-table-column>
        <el-table-column label="关联id" prop="orderid"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
      </el-table>



      <el-table :data="useData"
      style="width:100%;margin-top:40px;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
      v-show="activeName == 'second'">
        <el-table-column label="时间" prop="createdAt"></el-table-column>
        <el-table-column label="使用类型">
           <template slot-scope="scope">
             <!-- <p v-if="scope.row.source_from ==0">其他</p>
             <p v-if="scope.row.source_from ==90">过期扣除</p> -->
             <!-- <p v-if="scope.row.source_from ==30">充值红包</p>
             <p v-if="scope.row.source_from ==35">发放红包过期退回</p>
             <p v-if="scope.row.source_from ==40">未核销红包退回</p>
             <p v-if="scope.row.source_from ==50">买单送红包</p>
             <p v-if="scope.row.source_from ==55">后台充值</p> -->
             <p>{{scope.row.type?'消费':'消费'}}</p>
           </template>
        </el-table-column>
        <el-table-column label="使用红包金额">
          <template slot-scope="scope">
            <p v-if="scope.row.money">¥{{scope.row.money}}</p>
            <p v-else>---</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="关联id" prop="orderid"></el-table-column> -->
        <el-table-column label="备注" prop="remark">
          <template slot-scope="scope">
            <p v-if="scope.row.remark">{{scope.row.remark}}</p>
            <p v-else>---</p>
          </template>
        </el-table-column>
      </el-table>


       </div>


      <div class="pagination" v-show="activeName == 'first'">
        <el-pagination
          background
          @current-change="RecordpageChange"
          :current-page="recordpage"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="recordTotal"
        ></el-pagination>
      </div>


      <!--红包使用记录-->
      <div class="pagination" v-show="activeName == 'second'">
        <el-pagination
          background
          @current-change="usepageChange"
          :current-page="usePage"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="useTotal"
        ></el-pagination>
      </div>



      <div style="text-align:center;margin:60px 0 12px;">
        <el-button size="mini" @click="cancelLookRecord">取消</el-button>
        <el-button size="mini" @click="cancelLookRecord" type="primary">确定</el-button>
      </div>
    </jdialog>


    <jdialog title="强制退费确认" :visible.sync='isRefundDel' width='600px;'>
        <div style="padding:20px;">
          <i class="el-icon-warning-outline" style="color:orange; font-size:24px;"></i> <span style="margin-left:8px;font-size:15px;">强制退费确认</span>
          <p style='padding:0 0 16px 0;'>点此操作后，会员的所有小店会员将会强制退费结算，并不具有会员身份</p>
          <div style="text-align:center;margin:0 0 12px 0;">
             <el-button size="mini" @click="isRefundDel = false">取消</el-button>
             <el-button size="mini" type="primary" @click="certainRefunc">确认</el-button>
          </div>
        </div>
      </jdialog>
  </div>
</template>

<script>
import memberDetail from "./shopmemberdetail";
import memberOrderdetail from "./shopmemberoder";
// import { shopvipList, shopUserVipDisable,cardUserIdIncomeSearch,refundAllVipCardmoney ,userCardConsumeRecord} from "@/api/member";
import {shopVipRelationPageSizeList,
  shopVipRelationUpdate,
  shopVipRelationGenerateCode,
  shopVipRelationAdd,
  shopVipRelationDetail,
  shopVipRelationDeleteShopVip,
  shopVipRelationDeleteShop,
  shopVipRelationPageSizeShopDetail,
  shopVipRelationRedpacketList,
  shopMallOrderlist
} from '@/api/store'
export default {
  components: {
    memberDetail,
    memberOrderdetail
  },
  name: "member",
  data() {
    return {
      isShowMemberDetail: false,
      isShowMemberOrderDetail: false,
      currentId: "",
      curretOrderId: "",
      uid:0,
      memberidentityList: [
        { id: 4, title: "全部" },
        { id: 0, title: "乐粉" },
        { id: 1, title: "幕后街" },
        { id: 2, title: "合伙人" },
        { id: 5, title: "服务商" }
      ],
      form: {
        pageNum: 1,
        pageSize: 15,
        uid: "",
        phone: "",
        role: ""
      },
      total: 0,
      tableData: [],


      //红包充值记录
      isPurseRechargeRecord:false,
      currenRedId:0,
      recordData:[],
      recordpage:1,
      recordTotal:0,

      isRefundDel:false,

      //显示记录
      activeName:'first',

      //红包使用记录
      useData:[],
      usePage:1,
      useTotal:0,
      
    };
  },
  mounted() {
    this.getShopVipListData();
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    searchShopMember() {
      this.getShopVipListData();
    },
    handleClick(type){

      if(type == 2){
        this.activeName = 'first'
        this.recordpage=  1
        this.getcardUserIdIncomeSearchData()
      }else{
        this.activeName = 'second'
        this.usePage = 1
        this.userCardConsumeRecordListData()
      }
    },
    watchMember(id) {
      this.curretOrderId = id;
      this.isShowMemberOrderDetail = true;
    },
    openDetailMember(id) {
      // this.currentId = id;
      // this.isShowMemberDetail = true;
      this.$router.push({
        path: './shopMemberdetailRouter',
        query: { mid: id }
      })
    },
    deleteMember(id) {
      this.$confirm("确定删除该小店会员?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除小店
        this.getshopUserVipDisableData(id);
      }).catch(() => {
        console.log('cancel')
      });
    },
    //移除会员
    async getshopUserVipDisableData(id) {
      var url = "uid=" + id;
      let res = await shopUserVipDisable(url);
      if (res.code === 10000) {
        this.$message.success("删除成功");
        this.getShopVipListData();
      } else {
        this.$message.error(res.message);
      }
    },
    RefundMemberFee(id){
      console.log(id)
      this.currentId = id
      this.isRefundDel = true
    },
certainRefunc(){
    this.getrefundAllVipCardmoneyData()
},
    async getrefundAllVipCardmoneyData(){
      console.log(this.currentId)
      
     let res = await shopVipRelationDeleteShopVip({uid:this.currentId})
     if(res.code === 200){
        this.$message.success(res.message)
        this.isRefundDel = false
        this.getShopVipListData()
     }else{
       this.$message.error(res.message)
     }
    },
    certainshowMemberdetail() {
      this.isShowMemberDetail = false;
      this.getShopVipListData();
    },
    certainshowMemberOrderdetail() {
      this.isShowMemberOrderDetail = false;
    },
    pageChange(page) {
      this.form.pageNum = page;
      this.getShopVipListData();
    },

    //红包余额
    watchPurseAlready(id){
      this.currenRedId = id
      this.uid = id
      console.log(this.uid)
      this.getcardUserIdIncomeSearchData()
    },

    //充值记录分页
    RecordpageChange(page){
      this.recordpage = page
      this.getcardUserIdIncomeSearchData()
    },

    //取消查看记录
    cancelLookRecord(){
      this.isPurseRechargeRecord = false
      this.recordpage = 1
    },
    //获取小店会员列表
    async getShopVipListData() {
      if (this.form.role === 4) {
        this.form.role = "";
      }
      var url =
        "pageNum=" +
        this.form.pageNum +
        "&pageSize=" +
        this.form.pageSize +
        "&role=" +
        this.form.role +
        "&uid=" +
        this.form.uid +
        "&phone=" +
        this.form.phone;
      // let data = {
      //   pageNum:
      // }
      let res = await shopVipRelationPageSizeList(this.form);
      if (res.code === 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
    //获取红包充值记录
    async  getcardUserIdIncomeSearchData(){
      this.isPurseRechargeRecord = true
      var url = 'page='+this.recordpage;
      let data = {
        uid:this.uid,
        type:2,
        pageNum:this.recordpage,
        pageSize:20
      }
      console.log(data)
      let res = await shopVipRelationRedpacketList(data)
      if(res.code === 200){
         this.isPurseRechargeRecord = true
         this.recordData = res.data.data
         this.recordTotal = res.data.total
      }else{
        this.$message.error(res.message)
      }
    },

    usepageChange(page){
      this.usePage = page
      this.userCardConsumeRecordListData()
    },

    //获取红包使用记录
    async userCardConsumeRecordListData(){
      var url = 'page='+this.usePage+
                '&keyword=';
                let data = {
        uid:this.uid,
        type:3,
        pageNum:this.usePage,
        pageSize:20
      }
      let res = await shopVipRelationRedpacketList(data)
      if(res.code === 200){
        //  this.isPurseRechargeRecord = true
         this.useData = res.data.list
         this.useTotal = res.data.total
      }else{
        this.$message.error(res.message)
      }
    }

  }
};
</script>


<style scoped lang = 'scss'>
.shop {
  padding: 20px;

  .input_info {
    float: right;
    .member_input {
      width: 180px;

      margin-top: -8px;
    }
  }
  .input_info_second {
    float: right;
    margin-right: 16px;
    .member_input {
      width: 180px;

      margin-top: -5px;
    }
  }
  .pagination {
    float: right;
    margin-top: 28px;
  }
  .lookbig {
    font-weight: 400;
    color: #f4222d;
    cursor: pointer;
  }

  .record{
    /* height: 664px; */
    width: 100%;
    padding: 20px;
    .recharge{
      cursor: pointer;
      float: left;
      position: relative;
      height: 30px;
      margin-right: 12px;
      span{
        margin-left:4px;
        font-size: 16px;

      }
    }
    .re_row{
      margin-top: 0px;
       height: 21px;
       width: 2px;
       background: #333;
       float: left;

    }
    .re_pos{
      position: absolute;
      height: 2px;
      width: 100%;
      left: 0;
      bottom: 0;
      background-color: #f4222d;
    }

  }
}
</style>

